import React from 'react';
import { connect } from 'dva';
import { Tabs} from 'antd-mobile';
import Clothes from './clothes/clothes';
import styles from './classification.less';
import FlyBall from '../flyBall/FlyBall'
import { addSessionData , getSessionData } from '../../../utils/localData'
@connect(({global,homeGoods}) => ({
  global,homeGoods
}))
export default class Classification extends React.Component {

  constructor(props) {
    super(props)
    let h = document.body.clientHeight
    let w = document.body.clientWidth
    let sss = 0 
    if(w>=750){
      sss = 100;
    }else{
      sss = 100 * (w / 750);
    }
    let s2 =  h - 0.98*sss

    this.state = {
      isFirst : true,
      ballsTarget: { sx: w/2, sy: s2 },
      // 抛物小球
      balls: []
    }
  }

  mytt = [{title: "", sub: "bbbb"}]

 render() {
   console.log("获取商品类型")
   console.log(this.props.homeGoods.goodsTypes)
      const tt = this.mytt
      const t_width = '8vw'
      let t_maLeft = '6vw'
      let items = []
      if(this.props.homeGoods.goodsTypes && this.props.homeGoods.goodsTypes.length>0){
        this.props.homeGoods.goodsTypes.forEach((item)=>{
            tt.push({ title: item.categoryName, sub: item.categoryId })
        })
        let ss = this.props.homeGoods.goodsTypes.length > 5? 5 : this.props.homeGoods.goodsTypes.length
        let l = ss*2;
        let a = document.documentElement.clientWidth/l;
        let tm = a-document.documentElement.clientWidth*0.04;
        t_maLeft = tm+'px'

        for (var i = 0; i < this.props.homeGoods.goodsTypes.length; i++) {
          items.push(<Clothes key={i} addClick={this.addClick.bind(this)} index={i} goodsType={this.props.homeGoods.goodsTypes[i].categoryId} />);
        }
      }
      console.log("============类型title============")
      console.log(tt)
     return (
           <div className={styles.cat_all}>
     <Tabs tabs={tt}
          initialPage={0}
          swipeable={true}
          style={{ height: '100%'}}
          onChange={(tab, index) => {
            const { dispatch } = this.props
            dispatch({
                type: 'tableGoods/selGoods4BT',
                payload: {businessId:this.props.global.BusinessInfo.businessId,categoryId:tab.sub,index:index},
            })
          }}
          onTabClick={(tab, index) => {
            const { dispatch } = this.props
            dispatch({
                type: 'tableGoods/selGoods4BT',
                payload: {businessId:this.props.global.BusinessInfo.businessId,categoryId:tab.sub,index:index},
            })
          }}
          tabBarUnderlineStyle={{width:t_width,marginLeft:t_maLeft}}
        >
        {items}
        </Tabs>
        <FlyBall
          changeFlyBallCount={this.changeFlyBallCount.bind(this)}
          balls={this.state.balls}
          target={this.state.ballsTarget}
          curvature={0.02}
          speed={200}/>

  </div>
     )
 }

  addClick(e){
    this.showFlyBall(e)
  }

  componentDidUpdate(){
    if(this.props.homeGoods.goodsTypes && this.props.homeGoods.goodsTypes.length>0){
      console.log("第一次加载")
    }
    this.mytt = []
  }

  componentDidMount(){
    this.mytt = []
    const { dispatch } = this.props
    dispatch({
      type: 'homeGoods/selGoodsType',
      payload: {businessId:this.props.global.BusinessInfo.businessId},
    })

  }

  showFlyBall(e) {
    let state = this.state
    // console.log('eee:', e.pageY, e.pageX, this.props.source);
    let balls = this.state.balls
    let len = balls.length

    let newball ={
      id: new Date().getTime(),
      position: {
        x: e.pageX,
        y: e.pageY
      }
    }
    balls.push(newball)
    this.setState({
      balls: Object.assign([], balls),
    })
  }

  changeFlyBallCount(id) {
    console.log(`ball: ${id} hidden`)
    let state = this.state
    let balls = state.balls
    for (let i=0; i<balls.length; i++) {
      if(balls[i].id === id) {
        balls.splice(i, 1)
        break
      }
    }
    this.setState({
      balls: Object.assign([], state.balls)
    })
    console.log(this.state.balls)
  }
}

